<template>
  <!-- 设备管理 -->
  <div class="app-container">
    <el-row :gutter="20">
      <!--分组数据-->
      <el-col :span="4" :xs="24">
        <!-- <div v-hasRole="['ROLE_1']" class="head-container" style="margin-bottom: 10px;">
          <treeselect v-model="deptId" :options="deptOptions" :defaultExpandLevel="2" :normalizer="deptNormalizer"
                      placeholder="请选择机构"/>
        </div> -->
        <div>
          <el-button type="primary" size="mini" @click="handleQueryAll"
            >全部展示</el-button
          >
        </div>
        <div class="head-container" style="margin-top:5px">
          <el-input
            v-model="name"
            :placeholder="$t('equipment.groupingInput')"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 10px"
          />
        </div>
        <div class="head-container tree">
          <el-tree
            ref="tree"
            :data="groupOptions"
            :props="defaultProps"
            node-key="id"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            :highlight-current="true"
            default-expand-all
            :show-checkbox="groupStatus"
            @check-change="handleCheckChange"
            @node-click="handleNodeClick"
          >
            <div
              slot-scope="{ node, data }"
              class="el-tree-node__label custom-tree-node custom-tree-item"
              style="position: relative;"
            >
              <span class="name">{{ data.name }}</span>
              <div
                class="right-btns"
                style="position: absolute;right: 0; top: 0; background: #F5F7FA; height: 100%"
                @click.stop
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    groupStatus
                      ? $t('equipment.stopGroup')
                      : $t('equipment.startGroup')
                  "
                  placement="top"
                >
                  <el-switch
                    v-if="data.id === 43"
                    v-model="groupStatus"
                    active-color="#13ce66"
                    inactive-color="#ccc"
                    :active-value="true"
                    :inactive-value="false"
                    size="mini"
                    @change="handleGroupStatusChange"
                  />
                </el-tooltip>
                <svg-icon
                  v-hasPerm="['group_add']"
                  icon-class="plus"
                  @click="addGroup(node, data)"
                />
                <svg-icon
                  v-hasPerm="['group_edit']"
                  icon-class="edit"
                  @click="editGroup(node, data)"
                />
                <svg-icon
                  v-if="data.parentId > 0"
                  v-hasPerm="['group_del']"
                  icon-class="delete"
                  @click="deleteGroup(node, data)"
                />
              </div>
            </div>
          </el-tree>
        </div>
      </el-col>

      <!--设备数据-->
      <el-col :span="20" :xs="24">
        <el-form
          v-show="showSearch"
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="68px"
        >
          <el-form-item :label="$t('equipment.identification')" prop="name">
            <el-input
              v-model="queryParams.code"
              :placeholder="$t('equipment.identificationInput')"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('equipment.name')" prop="name">
            <el-input
              v-model="queryParams.name"
              :placeholder="$t('equipment.nameInput')"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- 设备类型 -->
          <!-- <el-form-item :label="$t('equipment.style')" prop="type">
            <el-select v-model="queryParams.type" :placeholder="$t('equipment.styleInput')">
              <el-option
                  v-for="dict in typeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item :label="$t('equipment.ip')" prop="name">
            <el-input
              v-model="queryParams.ipAddress"
              :placeholder="this.$t('equipment.ipInput')"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- 设备状态 -->
          <!-- <el-form-item :label="$t('equipment.status')" prop="status">
            <el-select v-model="queryParams.status" :placeholder="$t('equipment.statusSelect')" clearable
                       size="small"
            >
              <el-option
                  v-for="dict in statusOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item :label="$t('equipment.online')" prop="online">
            <el-select
              v-model="queryParams.online"
              :placeholder="$t('equipment.online')"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in [
                  { value: 0, label: '离线' },
                  { value: 1, label: '在线' },
                ]"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('elButton.establishTime')">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 210px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :start-placeholder="$t('elButton.startTime')"
              :end-placeholder="$t('elButton.endTime')"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >{{ $t("elButton.search") }}
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >{{ $t("elButton.reset") }}
            </el-button>
            <el-button
              v-hasPerm="['device_add']"
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              >{{ $t("elButton.add") }}
            </el-button>
            <el-button
              v-hasPerm="['device_export']"
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >{{ $t("elButton.export") }}
            </el-button>
            <el-button
              v-hasPerm="['device_clear']"
              type="danger"
              size="mini"
              icon="el-icon-delete-solid"
              @click="clear"
              >{{ $t("elButton.empty") }}
            </el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <!-- <el-col :span="1.5">
						<el-button
                v-hasPerm="['device_add']"
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
            >{{ $t('elButton.add') }}
            </el-button>
					</el-col> -->
          <!-- <el-col :span="1.5">
						<el-button
                v-hasPerm="['device_export']"
                type="warning"
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
            >{{ $t('elButton.export') }}
            </el-button>
					</el-col> -->
          <!--          <el-col :span="1.5">-->
          <!--            <el-button-->
          <!--                v-hasPerm="['device_export']"-->
          <!--                type="primary"-->
          <!--                icon="el-icon-edit"-->
          <!--                size="mini"-->
          <!--                @click="batchEdit"-->
          <!--            >{{ $t('elButton.batchEdit') }}-->
          <!--            </el-button>-->
          <!--          </el-col>-->
          <el-col :span="1.5">
            <el-button-group>
              <div style="display:flex;align-items: center">
                <div>节目操作:</div>
                <el-button
                  plain
                  v-hasPerm="['device_start']"
                  @click.native="playStart"
                  >{{ $t("elButton.startPlay") }}
                </el-button>
                <el-button
                  plain
                  v-hasPerm="['device_stop']"
                  @click.native="playStop"
                  >{{ $t("elButton.endPlay") }}
                </el-button>
                <el-button
                  plain
                  v-hasPerm="['device_set']"
                  @click.native="volumeSet"
                  >{{ $t("elButton.voiceSetting") }}
                </el-button>
                <el-button
                  plain
                  v-hasPerm="['device_mute']"
                  @click.native="volumeMute"
                  >{{ $t("elButton.noVoice") }}
                </el-button>
                <!-- <el-button
								v-hasPerm="['device_screenshot']"
								@click="screenshot(1, ids)"
								>{{ $t('elButton.capture') }}
							</el-button> -->
              </div>
              <div style="display:flex;align-items: center;margin-top:5px">
                <div>硬件操作:</div>
                <el-button v-hasPerm="['device_reboot']" @click.native="reboot"
                  >{{ $t("elButton.resetPower") }}
                </el-button>
                <el-button
                  v-hasPerm="['device_upgrade']"
                  @click.native="appUpgrade"
                  >{{ $t("elButton.upgrade") }}
                </el-button>
                <el-button
                  v-hasPerm="['device_brightness']"
                  @click.native="brightnessSet"
                  >{{ $t("elButton.brightnessSet") }}
                </el-button>
                <el-button @click.native="openSpeechDialog"
                  >{{ $t("elButton.speechTest") }}
                </el-button>
                <el-button
                  v-hasPerm="['device_timing']"
                  @click.native="timingSwitch"
                  >{{ $t("elButton.timePower") }}
                </el-button>
              </div>

              <!-- <el-button type="primary" size="mini" :disabled="single" v-hasPerm="['device_auth']"
                       icon="el-icon-circle-check" @click="handleAuth">认证
            </el-button> -->
              <!-- <el-button
                v-hasPerm="['device_clear']"
                type="danger"
                size="mini"
                icon="el-icon-delete-solid"
                @click="clear"
            >{{ $t('elButton.empty') }}
            </el-button> -->
              <!-- <el-dropdown>
							<el-button type="primary" icon="el-icon-s-tools" size="mini">
								{{ $t('elButton.voice')
								}}<i class="el-icon-arrow-down el-icon--right" />
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									v-hasPerm="['device_mute']"
									@click.native="volumeMute"
									>{{ $t('elButton.noVoice') }}
								</el-dropdown-item>
								<el-dropdown-item
									v-hasPerm="['device_set']"
									@click.native="volumeSet"
									>{{ $t('elButton.voiceSetting') }}
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<el-dropdown>
							<el-button
								type="warning"
								icon="el-icon-switch-button"
								size="mini"
							>
								{{ $t('elButton.power')
								}}<i class="el-icon-arrow-down el-icon--right" />
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									v-hasPerm="['device_shutdown']"
									@click.native="shutdown"
									>{{ $t('elButton.closePower') }}
								</el-dropdown-item>
								<el-dropdown-item
									v-hasPerm="['device_reboot']"
									@click.native="reboot"
									>{{ $t('elButton.resetPower') }}
								</el-dropdown-item>
								<el-dropdown-item
									v-hasPerm="['device_timing']"
									@click.native="timingSwitch"
									>{{ $t('elButton.timePower') }}
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<el-dropdown>
							<el-button type="primary" icon="el-icon-s-unfold" size="mini">
								{{ $t('wel.more')
								}}<i class="el-icon-arrow-down el-icon--right" />
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									v-hasPerm="['device_start']"
									@click.native="playStart"
									>{{ $t('elButton.startPlay') }}
								</el-dropdown-item>
								<el-dropdown-item
									v-hasPerm="['device_stop']"
									@click.native="playStop"
									>{{ $t('elButton.endPlay') }}
								</el-dropdown-item>
								<!--<el-dropdown-item @click.native="enableDevice">启用设备</el-dropdown-item>
                <el-dropdown-item @click.native="disableDevice">停用设备</el-dropdown-item>-->
              <!-- <el-dropdown-item
									v-hasPerm="['device_upgrade']"
									@click.native="appUpgrade"
									>{{ $t('elButton.upgrade') }}
								</el-dropdown-item> -->
              <!--                <el-dropdown-item v-hasPerm="['device_modeSet']" @click.native="modeSet">{{-->
              <!--                    $t('elButton.modeSet')-->
              <!--                  }}-->
              <!--                </el-dropdown-item>-->
              <!-- <el-dropdown-item
									v-hasPerm="['device_backlight']"
									@click.native="backlightSet"
									>{{ $t('elButton.backlightSet') }}
								</el-dropdown-item>
								<el-dropdown-item
									v-hasPerm="['device_brightness']"
									@click.native="brightnessSet"
									>{{ $t('elButton.brightnessSet') }}
								</el-dropdown-item> -->
              <!--                <el-dropdown-item v-hasPerm="['device_rotate']" @click.native="rotateSet">{{-->
              <!--                    $t('elButton.rotateSet')-->
              <!--                  }}-->
              <!--                </el-dropdown-item>-->
              <!--                <el-dropdown-item v-hasPerm="['device_hav']" @click.native="HAVSet">{{-->
              <!--                    $t('elButton.HAVSet')-->
              <!--                  }}-->
              <!--                </el-dropdown-item>-->
              <!-- <el-dropdown-item @click.native="speechTest"
									>{{ $t('elButton.speechTest') }}
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>  -->
            </el-button-group>
          </el-col>

          <div class="top-right-btn">
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('elButton.refresh')"
              placement="top"
            >
              <el-button
                size="mini"
                circle
                icon="el-icon-refresh"
                @click="handleQuery"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="
                showSearch
                  ? $t('elButton.hideSearch')
                  : $t('elButton.showSearch')
              "
              placement="top"
            >
              <el-button
                size="mini"
                circle
                icon="el-icon-search"
                @click="showSearch = !showSearch"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="
                listType ? $t('elButton.listType') : $t('elButton.gridType')
              "
              placement="top"
            >
              <el-button size="mini" circle @click="switchList">
                <img
                  class="list-type"
                  src="@/assets/img/list_type.png"
                  alt=""
                />
              </el-button>
            </el-tooltip>
          </div>
        </el-row>

        <el-table
          v-if="listType === 0"
          v-loading="loading"
          border
          :data="deviceList"
          @selection-change="handleSelectionChange"
          @cell-dblclick="handleEdit"
          @sort-change="sortChange"
        >
          <el-table-column
            v-if="groupStatus === false"
            type="selection"
            width="55"
            align="center"
          />
          <!-- <el-table-column :label="$t('equipment.number')" align="center" width="60" prop="id" /> -->
          <el-table-column
            :label="$t('equipment.identification')"
            align="center"
            prop="code"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="$t('equipment.name')"
            align="center"
            prop="name"
            width="100"
            sortable="custom"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="$t('equipment.sort')"
            align="center"
            prop="groupName"
          />
          <el-table-column
            :label="$t('equipment.playStyle')"
            align="center"
            prop="playMode"
            :formatter="playModeFormat"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="$t('equipment.style')"
            align="center"
            prop="type"
            :formatter="typeFormat"
          />
          <el-table-column
            :label="$t('equipment.resolving')"
            align="center"
            prop="resolution"
          />
          <el-table-column
            :label="$t('equipment.ip')"
            align="center"
            prop="ipAddress"
            sortable="custom"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="$t('equipment.edition')"
            align="center"
            prop="softVersion"
            width="100"
            sortable="custom"
          />
          <el-table-column
            :label="$t('equipment.status')"
            align="center"
            prop="status"
            :formatter="statusFormat"
          />
          <el-table-column
            :label="$t('equipment.onlineStatus')"
            align="center"
            prop="online"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.online === '0'" type="danger"
                >{{ $t("equipment.isUnderline") }}
              </el-tag>
              <el-tag v-if="scope.row.online === '1'" type="success"
                >{{ $t("equipment.isOnline") }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('equipment.createTime')"
            align="center"
            prop="createTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="200px"
            :label="$t('equipment.control')"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
          >
            <template slot-scope="scope">
              <!-- <el-button
                v-if="scope.row.status === '0'"
                size="mini"
                type="text"
                icon="el-icon-circle-check"
                v-hasPerm="['device_auth']"
                @click="handleAuth(scope.row)"
              >认证
              </el-button> -->
              <!-- <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
                v-hasPerm="['device_edit']"
              >修改
              </el-button> -->
              <el-button
                v-if="scope.row.code"
                v-hasPerm="['device_edit']"
                size="mini"
                type="text"
                icon="el-icon-info"
                @click.stop="programDeviceOpen(scope.row)"
                >{{ $t("equipment.programChannel") }}
              </el-button>
              <el-button
                v-hasPerm="['device_edit']"
                size="mini"
                type="text"
                icon="el-icon-info"
                @click.stop="handleDetail(scope.row)"
                >{{ $t("elButton.detail") }}
              </el-button>
              <el-button
                v-hasPerm="['device_del']"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click.stop="handleDel(scope.row)"
                >{{ $t("elButton.delete") }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div v-else class="out-list flex fx-ai-center fx-wrap">
          <div
            v-for="item in deviceList"
            :key="item.id"
            class="item"
            @click="handleEdit(item)"
          >
            <div class="title">
              <el-tag v-if="item.online === '0'" type="danger">{{
                $t("equipment.isUnderline")
              }}</el-tag>
              <el-tag v-if="item.online === '1'" type="success">{{
                $t("equipment.isOnline")
              }}</el-tag>
              <span>{{ item.name }}</span>
            </div>
            <img
              v-if="item.shotImg"
              :src="baseApi + `${item.shotImg}`"
              alt=""
            />
            <img v-else src="/img/nothing.png" alt="" />
            <!-- <div class="bottom">导诊节目</div> -->
          </div>
        </div>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.current"
          :limit.sync="queryParams.size"
          :page-sizes="[10, 20, 30, 40, 50, 200]"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 节目频道对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="channelFlag"
      :modal-append-to-body="true"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div style="margin-bottom:20px;font-size:16px;">
        {{ $t("equipment.nowPlaying") }}：{{ statusInfo.curProgram }}
      </div>
      <el-table v-loading="loading" :data="schedulingList" max-height="70vh">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table
              v-loading="loading"
              :data="scope.row.programs"
              max-height="70vh"
            >
              <el-table-column
                :label="$t('equipment.programName')"
                align="center"
                prop="name"
              />
              <el-table-column
                :label="$t('equipment.programSort')"
                align="center"
                prop="groupName"
              />
              <el-table-column
                :label="$t('equipment.programTime')"
                align="center"
                prop="duration"
              />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('equipment.channelName')"
          align="center"
          prop="name"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          :label="$t('equipment.channelType')"
          width="80px"
          align="center"
          prop="type"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == '0'" type="info">{{
              $t("equipment.channelType1")
            }}</el-tag>
            <el-tag v-if="scope.row.type == '1'">{{
              $t("equipment.channelType2")
            }}</el-tag>
            <el-tag v-if="scope.row.type == '2'" type="danger">{{
              $t("equipment.channelType3")
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('equipment.channelMode')"
          align="center"
          prop="playMode"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.playMode == '0'" type="info">{{
              $t("equipment.channelMode1")
            }}</el-tag>
            <el-tag v-if="scope.row.playMode == '1'" type="success"
              >{{ $t("equipment.channelMode2") }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="startDate"
          :label="$t('equipment.channelPlayDate')"
          width="200px"
        >
          <template slot-scope="scope">
            <span>{{
              `${parseTime(scope.row.startDate, "{y}-{m}-{d}")}` +
                $t("untils") +
                `${parseTime(scope.row.stopDate, "{y}-{m}-{d}")}`
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          :label="$t('equipment.channelPlayTime')"
        >
          <template slot-scope="scope">
            <span>{{
              `${scope.row.startTime}` + $t("untils") + `${scope.row.stopTime}`
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkTime"
          :label="$t('equipment.channelRelease')"
          width="150px"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.checkTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 添加或修改设备对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      :modal-append-to-body="true"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="85px">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.name')" prop="name">
              <el-input
                v-model="form.name"
                :placeholder="$t('equipment.nameInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.identification')" prop="code">
              <el-input
                v-model="form.code"
                :disabled="form.id != undefined ? true : false"
                :placeholder="$t('equipment.identificationInput')"
              />
            </el-form-item>
          </el-col>
          <el-col v-hasRole="['ROLE_1']" :span="12">
            <el-form-item :label="$t('equipment.company')" prop="deptId">
              <treeselect
                v-model="form.deptId"
                :options="deptOptions"
                :default-expand-level="2"
                :normalizer="deptNormalizer"
                :placeholder="$t('equipment.companySelect')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.sort')" prop="groupId">
              <treeselect
                v-model="form.groupId"
                :options="groupOptions.length ? groupOptions[0].children : []"
                :normalizer="normalizer"
                :placeholder="$t('equipment.sortInput')"
                @input="inputSelect"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.style')" prop="type">
              <el-select
                v-model="form.type"
                :placeholder="$t('equipment.styleInput')"
              >
                <el-option
                  v-for="dict in typeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('equipment.identificationCode')"
              prop="imsi"
            >
              <el-input
                v-model="form.imsi"
                :placeholder="$t('equipment.identificationCodeInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.address')" prop="address">
              <el-input
                v-model="form.address"
                :placeholder="$t('equipment.addressInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('equipment.LatitudeAndLongitude')"
              prop="latitude"
            >
              <el-input
                v-model="form.latitude"
                type="number"
                :placeholder="$t('equipment.longitude')"
                class="swidth"
              />
              <el-input
                v-model="form.longitude"
                type="number"
                :placeholder="$t('equipment.latitude')"
                class="swidth"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.resolving')" prop="resolution">
              <el-input
                v-model="form.resolution"
                :disabled="true"
                :placeholder="$t('equipment.resolvingInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.osVersion')" prop="osVersion">
              <el-input
                v-model="form.osVersion"
                :disabled="true"
                :placeholder="$t('equipment.osVersionInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.mac')" prop="macAddress">
              <el-input
                v-model="form.macAddress"
                :disabled="form.id != undefined ? true : false"
                :placeholder="$t('equipment.macInput')"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :label="$t('equipment.ip')" prop="address">
              <el-input
                v-model="form.ipAddress"
                :disabled="true"
                :placeholder="$t('equipment.ipInput')"
              />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item :label="$t('equipment.mqttBroker')" prop="mqttBroker">-->
          <!--              <el-input-->
          <!--                  v-model="form.mqttBroker"-->
          <!--                  :placeholder="$t('equipment.mqttBrokerInput')"-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <!--          <el-col :span="12">-->
          <!--            <el-form-item :label="$t('equipment.mqttUsername')" prop="mqttUsername">-->
          <!--              <el-input v-model="form.mqttUsername" :placeholder="$t('equipment.mqttUsernameInput')"/>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item :label="$t('equipment.mqttPassword')" prop="mqttPassword">-->
          <!--              <el-input-->
          <!--                  v-model="form.mqttPassword"-->
          <!--                  :placeholder="$t('equipment.mqttPasswordInput')"-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <!--          <el-col :span="12">-->
          <!--            <el-form-item :label="$t('equipment.mqttTopic')" prop="mqttTopic">-->
          <!--              <el-input v-model="form.mqttTopic" :placeholder="$t('equipment.mqttTopicInput')"/>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item :label="$t('equipment.keepalive')" prop="keepalive">-->
          <!--              <el-input type="number" v-model="form.keepalive"-->
          <!--                        :placeholder="$t('equipment.keepaliveInput')"-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item :label="$t('equipment.keepalive')" prop="reconnectPeriod">-->
          <!--              <el-input type="number" v-model="form.reconnectPeriod"-->
          <!--                        :placeholder="$t('equipment.reconnectPeriodInput')"-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="12">-->
          <!--            <el-form-item :label="$t('equipment.connectTimeout')" prop="connectTimeout">-->
          <!--              <el-input type="number" v-model="form.connectTimeout"-->
          <!--                        :placeholder="$t('equipment.connectTimeoutInput')"-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <el-col :span="24">
            <el-form-item :label="$t('equipment.remarks')" prop="remarks">
              <el-input
                v-model="form.remarks"
                type="textarea"
                rows="3"
                :placeholder="$t('equipment.remarksInput')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{
          $t("submitText")
        }}</el-button>
        <el-button @click="cancel">{{ $t("cancelText") }}</el-button>
      </div>
    </el-dialog>
    <!--    &lt;!&ndash;批量修改对话框&ndash;&gt;-->
    <!--    <el-dialog title="批量修改" :visible.sync="batchEditModal" :modal-append-to-body="true" :append-to-body="true"-->
    <!--               :close-on-click-modal="false"-->
    <!--    >-->
    <!--      <el-form ref="form" :model="form" :rules="rules" label-width="85px">-->
    <!--        <el-row>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item :label="$t('equipment.mqttBroker')" prop="mqttBroker">-->
    <!--              <el-input-->
    <!--                  v-model="form.mqttBroker"-->
    <!--                  :placeholder="$t('equipment.mqttBrokerInput')"-->
    <!--              />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item :label="$t('equipment.mqttUsername')" prop="mqttUsername">-->
    <!--              <el-input v-model="form.mqttUsername" :placeholder="$t('equipment.mqttUsernameInput')"/>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item :label="$t('equipment.mqttPassword')" prop="mqttPassword">-->
    <!--              <el-input-->
    <!--                  v-model="form.mqttPassword"-->
    <!--                  :placeholder="$t('equipment.mqttPasswordInput')"-->
    <!--              />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item :label="$t('equipment.mqttTopic')" prop="mqttTopic">-->
    <!--              <el-input v-model="form.mqttTopic" :placeholder="$t('equipment.mqttTopicInput')"/>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item :label="$t('equipment.keepalive')" prop="keepalive">-->
    <!--              <el-input v-model="form.keepalive" :placeholder="$t('equipment.keepaliveInput')"/>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item :label="$t('equipment.reconnectPeriod')" prop="reconnectPeriod">-->
    <!--              <el-input v-model="form.reconnectPeriod"-->
    <!--                        :placeholder="$t('equipment.reconnectPeriodInput')"-->
    <!--              />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item :label="$t('equipment.connectTimeout')" prop="connectTimeout">-->
    <!--              <el-input v-model="form.connectTimeout" :placeholder="$t('equipment.connectTimeoutInput')"/>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button type="primary" @click="batchSubmitForm">{{ $t('submitText') }}</el-button>-->
    <!--        <el-button @click="batchEditcancel">{{ $t('cancelText') }}</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
    <!-- 认证对话框 -->
    <el-dialog
      :title="$t('equipment.authentication')"
      :visible.sync="authOpen"
      :modal-append-to-body="true"
      :append-to-body="true"
    >
      <el-form
        ref="authForm"
        :model="authForm"
        :rules="authRules"
        label-width="85px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.name')" prop="name">
              <el-input
                v-model="authForm.name"
                :placeholder="$t('equipment.nameInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.identification')" prop="code">
              <el-input
                v-model="authForm.code"
                :disabled="true"
                :placeholder="$t('equipment.identificationInput')"
              />
            </el-form-item>
          </el-col>
          <el-col v-hasRole="['ROLE_1']" :span="12">
            <el-form-item :label="$t('equipment.company')" prop="deptId">
              <treeselect
                v-model="authForm.deptId"
                :options="deptOptions"
                :normalizer="deptNormalizer"
                :placeholder="$t('equipment.companySelect')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="$t('equipment.sort')" prop="groupId">
              <treeselect
                v-model="authForm.groupId"
                :options="groupOptions.length ? groupOptions[0].children : []"
                :normalizer="normalizer"
                placeholder="$t('equipment.sortInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.style')" prop="type">
              <el-select
                v-model="authForm.type"
                :placeholder="$t('equipment.styleInput')"
              >
                <el-option
                  v-for="dict in typeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.address')" prop="address">
              <el-input
                v-model="authForm.address"
                :placeholder="$t('equipment.addressInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="$t('equipment.LatitudeAndLongitude')"
              prop="latitude"
            >
              <el-input
                v-model="authForm.latitude"
                type="number"
                :placeholder="$t('equipment.longitude')"
                class="swidth"
              />
              <el-input
                v-model="authForm.longitude"
                type="number"
                :placeholder="$t('equipment.latitude')"
                class="swidth"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.resolving')" prop="resolution">
              <el-input
                v-model="authForm.resolution"
                :disabled="true"
                :placeholder="$t('equipment.resolvingInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.osVersion')" prop="osVersion">
              <el-input
                v-model="authForm.osVersion"
                :disabled="true"
                :placeholder="$t('equipment.osVersionInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.mac')" prop="address">
              <el-input
                v-model="authForm.macAddress"
                :disabled="true"
                :placeholder="$t('equipment.macInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('equipment.ip')" prop="address">
              <el-input
                v-model="authForm.ipAddress"
                :disabled="true"
                :placeholder="$t('equipment.ipInput')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('equipment.remarks')" prop="remarks">
              <el-input
                v-model="authForm.remarks"
                type="textarea"
                rows="3"
                :placeholder="$t('equipment.remarksInput')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="authForm.status === '0' || authForm.status === '3'"
          type="primary"
          @click="authSubmitForm"
          >{{ $t("equipment.authentication") }}
        </el-button>
        <el-button @click="authCancel">{{ $t("cancelText") }}</el-button>
      </div>
    </el-dialog>

    <!--审核页面-->
    <audit
      :obj="auditObj"
      :visible.sync="auditVisible"
      :audit-title="$t('equipment.examine')"
      audit-type="device"
    />

    <!--添加/编辑分组-->
    <el-dialog
      :visible.sync="groupDialogVisible"
      :title="$t('equipment.sortTitle')"
      width="30%"
      class="wrapper"
      :modal-append-to-body="true"
      :append-to-body="true"
      @closed="groupDialogClosed"
    >
      <el-form
        ref="form"
        @submit.native.prevent
        :model="groupObj"
        :rules="groupRules"
        label-width="80px"
      >
        <el-form-item :label="$t('equipment.sort')" prop="name">
          <el-input
            ref="name"
            auto-complete="off"
            v-model="groupObj.name"
            size="small"
            @keyup.enter.native="handleClickSaveGroup"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClickSaveGroup">{{
          $t("submitText")
        }}</el-button>
        <el-button @click="groupDialogVisible = false">{{
          $t("cancelText")
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 定时开关机对话框 -->
    <el-dialog
      :title="$t('elButton.timingSwitch')"
      :visible.sync="tOpen"
      width="710px"
      :modal-append-to-body="true"
      :append-to-body="true"
    >
      <el-form label-width="85px">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('elButton.startButton')" prop="shutTiming">
              <el-switch
                v-model="timingStatus"
                :active-text="$t('elButton.timingStart')"
                :inactive-text="$t('elButton.timingShut')"
                active-value="1"
                inactive-value="0"
                @change="timingSwitchEdit"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-for="(item, index) in timeControl">
            <el-form :inline="true">
              <el-form-item
                :label="$t('elButton.startTiming')"
                prop="startTiming"
              >
                <el-time-picker
                  v-model="item.startTiming"
                  format="HH:mm"
                  value-format="HH:mm"
                  :picker-options="{ format: 'HH:mm' }"
                  :placeholder="$t('elButton.startTiming')"
                />
              </el-form-item>
              <el-form-item
                :label="$t('elButton.shutTiming')"
                prop="shutTiming"
              >
                <el-time-picker
                  v-model="item.shutTiming"
                  format="HH:mm"
                  value-format="HH:mm"
                  :picker-options="{ format: 'HH:mm' }"
                  :placeholder="$t('elButton.shutTiming')"
                />
                <el-button
                  @click="addTimeControl()"
                  size="mini"
                  circle
                  icon="el-icon-plus"
                  v-if="index === 0"
                ></el-button>
                <el-button
                  @click="deleteTimeControl(index)"
                  size="mini"
                  circle
                  icon="el-icon-minus"
                  v-if="index !== 0"
                ></el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="tCancel">{{
          $t("cancelText")
        }}</el-button>
        <el-button size="small" type="primary" @click="tSubmitForm">{{
          $t("submitText")
        }}</el-button>
      </div>
    </el-dialog>

    <!-- 屏幕旋转对话框 -->
    <el-dialog
      :title="$t('elButton.screenRotate')"
      :visible.sync="rOpen"
      width="560px"
      center
      :modal-append-to-body="true"
      :append-to-body="true"
    >
      <el-form label-width="85px">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('elButton.rotate')" prop="rotationDegree">
              <el-select
                v-model="rotationDegree"
                :placeholder="$t('elButton.rotateInput')"
                clearable
              >
                <el-option label="0" value="0" />
                <el-option label="90" value="90" />
                <el-option label="180" value="180" />
                <el-option label="270" value="270" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="rCancel">{{
          $t("cancelText")
        }}</el-button>
        <el-button size="small" type="primary" @click="rSubmitForm">{{
          $t("submitText")
        }}</el-button>
      </div>
    </el-dialog>

    <!-- 模式设置对话框 -->
    <el-dialog
      :title="$t('elButton.modeSet')"
      :visible.sync="pOpen"
      width="560px"
      center
      :modal-append-to-body="true"
      :append-to-body="true"
    >
      <el-form label-width="85px">
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('equipment.modeSetTo')" prop="playMode">
              <el-select
                v-model="playMode"
                :placeholder="$t('equipment.modeInput')"
                clearable
              >
                <el-option :label="$t('equipment.sdMode')" value="0" />
                <el-option :label="$t('equipment.cloudMode')" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="pCancel">{{
          $t("cancelText")
        }}</el-button>
        <el-button size="small" type="primary" @click="pSubmitForm">{{
          $t("submitText")
        }}</el-button>
      </div>
    </el-dialog>

    <!-- 监控详情对话框 -->
    <el-dialog
      :title="mTitle"
      class="dialog"
      :fullscreen="true"
      :visible.sync="mOpen"
      :modal-append-to-body="true"
      :append-to-body="true"
    >
      <el-row :gutter="10">
        <el-col :span="24" style="margin-bottom: 10px;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ $t("equipment.dialogTitle") }}</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="getDeviceInfo"
                >{{ $t("elButton.refresh") }}
              </el-button>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>
                  <tr>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.name") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.name }}</div>
                    </td>
                    <td class="title">
                      <div class="cell">
                        {{ $t("equipment.identification") }}
                      </div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.code }}</div>
                    </td>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.status") }}</div>
                    </td>
                    <td>
                      <div class="cell">
                        <el-tag type="primary">{{
                          statusFormat(deviceInfo)
                        }}</el-tag>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.forCompany") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.deptName }}</div>
                    </td>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.ip") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.ipAddress }}</div>
                    </td>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.resolving") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.resolution }}</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.forSort") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.groupName }}</div>
                    </td>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.playStyle") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ playModeFormat(deviceInfo) }}</div>
                    </td>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.playVoice") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.volume }}</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.style") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ typeFormat(deviceInfo) }}</div>
                    </td>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.mac") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.macAddress }}</div>
                    </td>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.address") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.address }}</div>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.osVersion") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.osVersion }}</div>
                    </td>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.edition") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.softVersion }}</div>
                    </td>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.updateTime") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ deviceInfo.updateTime }}</div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24" style="margin-bottom: 10px;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ $t("equipment.status") }}</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="getDeviceStatus()"
                >{{ $t("elButton.refresh") }}
              </el-button>
            </div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%;">
                <tbody>
                  <tr>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.nowPlaying") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ statusInfo.curProgram }}</div>
                    </td>
                    <td class="title">
                      <div class="cell">{{ $t("equipment.playingTime") }}</div>
                    </td>
                    <td>
                      <div class="cell">{{ statusInfo.runTime }}分</div>
                    </td>
                    <td class="title">
                      <div class="cell">
                        {{ $t("equipment.playingavailMem") }}
                      </div>
                    </td>
                    <td>
                      <div class="cell">
                        {{ statusInfo.availMem }}/{{ statusInfo.totalMem }}
                      </div>
                    </td>
                    <td class="title">
                      <div class="cell">
                        {{ $t("equipment.playinguseStorage") }}
                      </div>
                    </td>
                    <td>
                      <div class="cell">
                        {{ statusInfo.useStorage }}/{{
                          statusInfo.totalStorage
                        }}
                      </div>
                    </td>
                  </tr>
                  <!-- 设备开关机时间 -->
                  <tr>
                    <td class="title">
                      <div class="cell">
                        {{ "设备开关机时间" }}
                      </div>
                    </td>
                    <!-- TODO:后续获取开关机时间字段  -->
                    <td v-for="(item, index) in startTimings">
                      <div class="cell">
                        开机:{{ item ? item : "无" }}/关机:{{
                          item ? deviceInfo.shutTiming.split(",")[index] : ""
                        }}
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ $t("equipment.nowChanel") }}</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="getDeviceScheduling"
                >{{ $t("elButton.refresh") }}
              </el-button>
            </div>
            <el-table
              :data="schedulingList"
              style="width: 100%"
              :border="true"
              :stripe="true"
            >
              <el-table-column
                prop="name"
                :label="$t('equipment.channelName')"
              />
              <el-table-column
                prop="type"
                :label="$t('equipment.channelType')"
                width="100px"
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.type === '0'" type="info"
                    >{{ $t("equipment.channelType1") }}
                  </el-tag>
                  <el-tag v-if="scope.row.type === '1'">{{
                    $t("equipment.channelType2")
                  }}</el-tag>
                  <el-tag v-if="scope.row.type === '2'" type="danger"
                    >{{ $t("equipment.channelType3") }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="playMode"
                :label="$t('equipment.channelMode')"
                width="120px"
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.playMode === '0'" type="info"
                    >{{ $t("equipment.channelMode1") }}
                  </el-tag>
                  <el-tag v-if="scope.row.playMode === '1'" type="success"
                    >{{ $t("equipment.channelMode2") }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="startDate"
                :label="$t('equipment.channelPlayDate')"
              >
                <template slot-scope="scope">
                  <span>{{
                    `${parseTime(scope.row.startDate, "{y}-{m}-{d}")}` +
                      $t("untils") +
                      `${parseTime(scope.row.stopDate, "{y}-{m}-{d}")}`
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="startTime"
                :label="$t('equipment.channelPlayTime')"
              >
                <template slot-scope="scope">
                  <span>{{
                    `${scope.row.startTime}` +
                      $t("untils") +
                      `${scope.row.stopTime}`
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="checkTime"
                :label="$t('equipment.channelRelease')"
                width="100px"
              >
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.checkTime) }}</span>
                </template>
              </el-table-column>
              <!--<el-table-column
                :label="$t('equipment.control')"
                width="80px">
                <template slot-scope="scope">
                  <el-button type="text" icon="el-icon-delete" @click="handleClickDeleteVersion(scope)">删除</el-button>
                </template>
              </el-table-column>-->
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ $t("equipment.capture") }}</span>
              <el-button
                type="text"
                style="float: right; padding: 3px 0"
                @click="getDeviceInfo"
                >{{ $t("elButton.refresh") }}
              </el-button>
              <el-button
                v-hasPerm="['device_screenshot']"
                type="text"
                style="float: right; padding: 3px 10px"
                @click="screenshot"
                >{{ $t("elButton.capture") }}
              </el-button>
            </div>
            <el-image
              :src="
                deviceInfo.shotImg != ''
                  ? baseApi + deviceInfo.shotImg
                  : defShotImg
              "
              height="278"
            />
            <div class="shotTime">
              {{ $t("equipment.updateTime") }}：{{ deviceInfo.shotTime }}
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="mClose">{{ $t("closeText") }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :modal="false"
      :title="$t('version')"
      :visible.sync="versionDialogVisible"
    >
      <el-table
        ref="versionTable"
        @selection-change="versionSelectionChange"
        :data="versionData"
      >
        <el-table-column type="selection" width="55" align="center" />
        <!--<el-table-column :label="$t('equipment.number')" align="center" prop="id" />-->
        <el-table-column
          :label="$t('edition.name')"
          align="center"
          prop="name"
        />
        <el-table-column
          :label="$t('edition.number')"
          align="center"
          prop="code"
          width="80"
        />
        <el-table-column
          :label="$t('edition.style')"
          align="center"
          prop="type"
          :formatter="typeFormat"
        />
        <el-table-column
          :label="$t('edition.size')"
          align="center"
          prop="appSize"
          width="80"
        />
        <el-table-column
          :label="$t('edition.explain')"
          align="center"
          prop="appDesc"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          :label="$t('equipment.createTime')"
          align="center"
          prop="createTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="versionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="appUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 输入要播报的语音弹框 -->
    <el-dialog
      :visible.sync="speechDialogVisible"
      title="语音播报内容"
      width="30%"
      class="wrapper"
      :modal-append-to-body="true"
      :append-to-body="true"
    >
      语音播报内容： <el-input v-model="speechContent"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="speechDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="speechTest">确 定</el-button>
      </span>
    </el-dialog>

    <el-drawer
      :visible.sync="drawer"
      :append-to-body="true"
      :modal-append-to-body="true"
      size="20%"
      :with-header="false"
    >
      <div class="operation">
        <div v-if="!form.id" class="tip">
          {{ $t("equipment.equipmentInput") }}
        </div>
        <template v-else>
          <div class="img-box">
            <img :src="baseApi + `${form.shotImg}`" alt="" />
          </div>
          <el-collapse v-model="collapseActiveName" accordion>
            <el-collapse-item :title="$t('equipment.attribute')" name="1">
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="85px"
                size="mini"
              >
                <el-form-item :label="$t('equipment.name')" prop="name">
                  <el-input
                    v-model="form.name"
                    :placeholder="$t('equipment.nameInput')"
                  />
                </el-form-item>
                <el-form-item
                  :label="$t('equipment.identification')"
                  prop="code"
                >
                  <el-input
                    v-model="form.code"
                    :disabled="form.id != undefined ? true : false"
                    :placeholder="$t('equipment.identificationInput')"
                  />
                </el-form-item>
                <el-form-item :label="$t('equipment.company')" prop="deptId">
                  <treeselect
                    v-model="form.deptId"
                    :options="deptOptions"
                    :default-expand-level="2"
                    :normalizer="deptNormalizer"
                    :placeholder="$t('equipment.companySelect')"
                  />
                </el-form-item>
                <el-form-item :label="$t('equipment.sort')" prop="groupId">
                  <treeselect
                    v-model="form.groupId"
                    :options="
                      groupOptions.length ? groupOptions[0].children : []
                    "
                    :normalizer="normalizer"
                    :placeholder="$t('equipment.sortInput')"
                  />
                </el-form-item>
                <el-form-item :label="$t('equipment.style')" prop="type">
                  <el-select
                    v-model="form.type"
                    :placeholder="$t('equipment.styleInput')"
                  >
                    <el-option
                      v-for="dict in typeOptions"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('equipment.address')" prop="address">
                  <el-input
                    v-model="form.address"
                    :placeholder="$t('equipment.addressInput')"
                  />
                </el-form-item>
                <el-form-item
                  :label="$t('equipment.LatitudeAndLongitude')"
                  prop="latitude"
                >
                  <el-input
                    v-model="form.latitude"
                    type="number"
                    :placeholder="$t('equipment.longitude')"
                    class="swidth"
                  />
                  <el-input
                    v-model="form.longitude"
                    type="number"
                    :placeholder="$t('equipment.latitude')"
                    class="swidth"
                  />
                </el-form-item>
                <el-form-item
                  :label="$t('equipment.resolving')"
                  prop="resolution"
                >
                  <el-input
                    v-model="form.resolution"
                    :disabled="true"
                    :placeholder="$t('equipment.resolvingInput')"
                  />
                </el-form-item>
                <el-form-item
                  :label="$t('equipment.osVersion')"
                  prop="osVersion"
                >
                  <el-input
                    v-model="form.osVersion"
                    :disabled="true"
                    :placeholder="$t('equipment.osVersionInput')"
                  />
                </el-form-item>
                <el-form-item :label="$t('equipment.mac')" prop="macAddress">
                  <el-input
                    v-model="form.macAddress"
                    :disabled="form.id != undefined ? true : false"
                    :placeholder="$t('equipment.macInput')"
                  />
                </el-form-item>

                <el-form-item :label="$t('equipment.ip')" prop="address">
                  <el-input
                    v-model="form.ipAddress"
                    :disabled="true"
                    :placeholder="$t('equipment.ipInput')"
                  />
                </el-form-item>
                <!--                <el-form-item :label="$t('equipment.mqttBroker')" prop="mqttBroker">-->
                <!--                  <el-input-->
                <!--                      v-model="form.mqttBroker"-->
                <!--                      :placeholder="$t('equipment.mqttBrokerInput')"-->
                <!--                  />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item :label="$t('equipment.mqttUsername')" prop="mqttUsername">-->
                <!--                  <el-input-->
                <!--                      v-model="form.mqttUsername"-->
                <!--                      :placeholder="$t('equipment.mqttUsernameInput')"-->
                <!--                  />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item :label="$t('equipment.mqttPassword')" prop="mqttPassword">-->
                <!--                  <el-input-->
                <!--                      v-model="form.mqttPassword"-->
                <!--                      :placeholder="$t('equipment.mqttPasswordInput')"-->
                <!--                  />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item :label="$t('equipment.mqttTopic')" prop="mqttTopic">-->
                <!--                  <el-input-->
                <!--                      v-model="form.mqttTopic"-->
                <!--                      :placeholder="$t('equipment.mqttTopicInput')"-->
                <!--                  />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item :label="$t('equipment.keepalive')" prop="keepalive">-->
                <!--                  <el-input-->
                <!--                      v-model="form.keepalive"-->
                <!--                      :placeholder="$t('equipment.keepaliveInput')"-->
                <!--                  />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item :label="$t('equipment.reconnectPeriod')" prop="reconnectPeriod">-->
                <!--                  <el-input-->
                <!--                      v-model="form.reconnectPeriod"-->
                <!--                      :placeholder="$t('equipment.reconnectPeriodInput')"-->
                <!--                  />-->
                <!--                </el-form-item>-->
                <!--                <el-form-item :label="$t('equipment.connectTimeout')" prop="connectTimeout">-->
                <!--                  <el-input-->
                <!--                      v-model="form.connectTimeout"-->
                <!--                      :placeholder="$t('equipment.connectTimeoutInput')"-->
                <!--                  />-->
                <!--                </el-form-item>-->
                <el-form-item :label="$t('equipment.remarks')" prop="remarks">
                  <el-input
                    v-model="form.remarks"
                    type="textarea"
                    rows="3"
                    :placeholder="$t('equipment.remarksInput')"
                  />
                </el-form-item>
                <div class="footer ta-center">
                  <el-button type="primary" @click="submitForm"
                    >{{ $t("elButton.change") }}
                  </el-button>
                </div>
              </el-form>
            </el-collapse-item>
            <el-collapse-item :title="$t('elButton.action')" name="2">
              <div class="list">
                <div
                  v-hasPerm="['device_shutdown']"
                  class="item"
                  @click="shutdown(1, form.id)"
                >
                  {{ $t("elButton.close") }}
                </div>
                <div
                  v-hasPerm="['device_reboot']"
                  class="item"
                  @click="reboot(1, form.id)"
                >
                  {{ $t("elButton.restart") }}
                </div>
                <div
                  v-hasPerm="['device_start']"
                  class="item"
                  @click="playStart(1, form.id)"
                >
                  {{ $t("elButton.play") }}
                </div>
                <div
                  v-hasPerm="['device_stop']"
                  class="item"
                  @click="playStop(1, form.id)"
                >
                  {{ $t("elButton.suspend") }}
                </div>
                <div
                  v-hasPerm="['device_screenshot']"
                  class="item"
                  @click="screenshot(1, form.id)"
                >
                  {{ $t("elButton.capture") }}
                </div>
                <div
                  v-hasPerm="['device_mute']"
                  class="item"
                  @click="volumeMute(1, form.id)"
                >
                  {{ $t("elButton.noVoice") }}
                </div>
                <div class="item">
                  <div>{{ $t("elButton.controlVoice") }}</div>
                  <el-slider
                    v-model="form.volume"
                    input-size="mini"
                    @change="volumeSetRight(form)"
                  />
                </div>
                <div class="item">{{ $t("elButton.timingSwitch") }}</div>
                <div class="item">
                  <el-switch
                    v-model="timingStatus"
                    :active-text="$t('elButton.timingStart')"
                    :inactive-text="$t('elButton.timingShut')"
                    active-value="1"
                    inactive-value="0"
                    @change="timingSwitchOpen(form.id)"
                  />
                </div>
                <div class="item flex fx-ai-center">
                  <span>{{ $t("elButton.timingOpen") }}：</span>
                  <el-time-picker
                    v-model="startTiming"
                    class="fx-1"
                    format="HH:mm"
                    value-format="HH:mm"
                    :picker-options="{ format: 'HH:mm' }"
                    :placeholder="$t('elButton.timingOpenInput')"
                  />
                </div>
                <div class="item flex fx-ai-center">
                  <span>{{ $t("elButton.timingClose") }}：</span>
                  <el-time-picker
                    v-model="shutTiming"
                    class="fx-1"
                    format="HH:mm"
                    value-format="HH:mm"
                    :picker-options="{ format: 'HH:mm' }"
                    :placeholder="$t('elButton.timingCloseInput')"
                  />
                </div>
              </div>
            </el-collapse-item>
            <!-- <el-collapse-item title="频道" name="3">
              <div class="list">
                <div class="item flex fx-ai-center">
                  <span class="ta-right" style="width:92px;">默认播放频道：</span>
                  <el-input class="fx-1" placeholder="请输入默认播放频道" />
                </div>
                <div class="item flex fx-ai-center">
                  <span class="ta-right" style="width:92px;">报警按键：</span>
                  <el-input class="fx-1" placeholder="请输入报警按键" />
                </div>
                <div class="item flex fx-ai-center">
                  <span class="ta-right" style="width:92px;">消防警报：</span>
                  <el-input class="fx-1" placeholder="请输入消防警报" />
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="播放历史" name="4">
              <div class="list">
                <div class="item flex fx-ai-center">
                  <span class="ta-right" style="width:92px;">默认播放频道：</span>
                  <el-input class="fx-1" placeholder="请输入默认播放频道" />
                </div>
                <div class="item flex fx-ai-center">
                  <span class="ta-right" style="width:92px;">报警按键：</span>
                  <el-input class="fx-1" placeholder="请输入报警按键" />
                </div>
                <div class="item flex fx-ai-center">
                  <span class="ta-right" style="width:92px;">消防警报：</span>
                  <el-input class="fx-1" placeholder="请输入消防警报" />
                </div>
              </div>
            </el-collapse-item> -->
          </el-collapse>
        </template>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// 设备管理
import {
  listDevice,
  getDevice,
  addDevice,
  batchEditDevice,
  editDevice,
  exportDevice,
  switchTiming,
  setMode,
  upgradeApp,
  setBrightness,
  setVolume,
  muteVolume,
  setRotate,
  setBacklight,
  shotImage,
  updateStatus,
  setHAV,
  setSpeechTest,
  startPlay,
  stopPlay,
  rebootDevice,
  shutdownDevice,
  clearplay,
  getStatusInfo,
} from "@/api/ips/device";
import { deptTree } from "@/api/system/dept";
import { addGroup, editGroup, delGroup, groupTree } from "@/api/ips/group";
import { listScheduling } from "@/api/ips/scheduling";
import Treeselect from "@riophae/vue-treeselect";
import { getAccessToken } from "@/data/user";
import AuditMixin from "@/mixins/audit/index.js";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getLabelByValInTree } from "@/utils/obj-util";
import eventbus from "@/utils/eventbus";
import { listVersion } from "@/api/ips/version";

export default {
  name: "Device",
  components: { Treeselect },
  mixins: [AuditMixin],
  data() {
    const nameValidator = (rule, val, callback) => {
      if (val) {
        callback();
      } else {
        callback(new Error(this.$t("equipment.groupingInput")));
      }
    };
    return {
      timeControl: [{ startTiming: "", shutTiming: "" }],
      drawer: false,
      getAccessToken,
      listType: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      versionIds: [],
      versionDialogVisible: false,
      // 在线状态
      onlines: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 设备表格数据
      deviceList: [],
      // 设备表格数据id
      deviceIds: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      VersionData: [],
      //是否显示批量修改弹出层
      batchEditModal: false,
      authOpen: false,
      // 模式设置
      pOpen: false,
      playMode: "1",
      // 屏幕旋转
      rOpen: false,
      rotationDegree: 0,
      // 定时开关机
      tOpen: false,
      startTiming: "",
      shutTiming: "",
      // 监控
      mTitle: this.$t("equipment.monitoring"),
      mOpen: false,
      // 日期范围
      dateRange: [],
      // 设备类型字典
      typeOptions: [], // 状态字典
      statusOptions: [], // 查询参数
      playModeOptions: [], // 播放模式
      name: undefined,
      deptId: undefined,
      deptOptions: [],
      groupOptions: [],
      groupDict: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      queryParams: {
        current: 1,
        size: 10,
        fullPathId: 43,
        deptId: undefined,
        name: undefined,
        code: undefined,
        groupName: undefined,
        type: undefined,
        ipAddress: undefined,
        status: undefined,
        createTime: undefined,
      },
      // 显示搜索条件
      showSearch: true,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            message: this.$t("equipment.nameEmpty"),
            trigger: "blur",
          },
        ],
        groupId: [
          {
            required: true,
            message: this.$t("equipment.sortEmpty"),
            trigger: "input",
          },
        ],
        type: [
          {
            required: true,
            message: this.$t("equipment.styleEmpty"),
            trigger: "change",
          },
        ],
        macAddress: [
          {
            required: true,
            message: this.$t("equipment.macEmpty"),
            trigger: "blur",
          },
        ],
      },
      // 认证表单参数
      authForm: {},
      // 认证表单校验
      authRules: {
        name: [
          {
            required: true,
            message: this.$t("equipment.nameEmpty"),
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: this.$t("equipment.styleEmpty"),
            trigger: "blur",
          },
        ],
        groupId: [
          {
            required: true,
            message: this.$t("equipment.sortEmpty"),
            trigger: "blur",
          },
        ],
      },
      //
      groupDialogVisible: false,
      groupObj: {},
      groupRules: {
        name: [{ validator: nameValidator }],
      },
      channelFlag: false, // 节目频道弹窗标志位
      // 启用/停用分组
      groupStatus: false,
      // 选中的分组ID 批量清空节目、音量控制、电源控制、认证、定时开关机用
      selectedGroupIdList: [],
      schedulingList: [],
      deviceInfo: {},
      statusInfo: {
        curProgram: "无",
        runTime: 0,
        availMem: 0,
        totalMem: 0,
        useStorage: 0,
        totalStorage: 0,
      },
      defShotImg: require("../../../assets/images/noshot.png"),
      baseApi: process.env.VUE_APP_BASE_API,
      realtimeInfo: {},
      groupIds: 43,
      collapseActiveName: "1",
      timingStatus: false,
      speechDialogVisible: false, // 语音播报弹框输入
      speechContent: "", // 语音内容
      onlineStatus: true, // 判断是否存在在线设备
    };
  },
  computed: {
    startTimings() {
      if (this.deviceInfo.startTiming) {
        return this.deviceInfo.startTiming.split(",");
      } else {
        return [];
      }
    },
  },
  watch: {
    // 根据名称筛选分组名称树
    name(val) {
      this.$refs.tree.filter(val);
    },
    deptId(val) {
      this.queryParams.current = 1;
      // this.queryParams.deptId = val
      this.getList();
      this.getGroupTree();
    },
    listType(val) {
      if (val === 1) {
        this.screenshot(2);
      }
    },
  },
  created() {
    this.handleQueryAll();
    this.getGroupTree();
    this.getDicts("device_type").then((response) => {
      this.typeOptions = response.data;
    });
    this.getDicts("auth_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getDicts("play_mode").then((response) => {
      this.playModeOptions = response.data;
    });
    listVersion().then((response) => {
      this.versionData = response.data;
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.getDeptTree();
    });
    eventbus.$on("websocket", (data) => {
      if (
         /*后端定义常量消息结构：更新设备在线状态、更新管理后台的截屏展示页面*/
        data.type == '118' ||
        data.type == '119'
      ) {
        this.getList();
      }
      if (this.mOpen && data.type == '119') {
        this.getDeviceInfo();
      }
    });
    this.$once("hook:beforeDestroy", () => {
      eventbus.$off("websocket");
    });
  },
  methods: {
    // 添加开关机时间
    addTimeControl(index) {
      this.timeControl.push({ startTiming: "", shutTiming: "" });
    },
    // 删除开关机时间
    deleteTimeControl(index) {
      this.$delete(this.timeControl, index);
    },
    // 排序改变时
    sortChange(data) {
      // 按版本排序
      if (data.prop === "softVersion") {
        delete this.queryParams.orderByName;
        delete this.queryParams.orderByIp;
        // 降序排序
        if (data.order === "descending") {
          this.queryParams.orderBySoftVersion = 2;
        } else {
          this.queryParams.orderBySoftVersion = 1;
        }
      }
      // 按名称
      if (data.prop === "name") {
        delete this.queryParams.orderByIp;
        delete this.queryParams.orderBySoftVersion;
        // 降序排序
        if (data.order === "descending") {
          this.queryParams.orderByName = 2;
        } else {
          this.queryParams.orderByName = 1;
        }
      }
      if (data.prop === "ipAddress") {
        delete this.queryParams.orderByName;
        delete this.queryParams.orderBySoftVersion;
        // 降序排序
        if (data.order === "descending") {
          this.queryParams.orderByIp = 2;
        } else {
          this.queryParams.orderByIp = 1;
        }
      }
      this.getList();
      console.log(`<<<<2022年12月16日 13:52:34>>>>`, { data: data });
    },
    handleClickSaveGroup() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const fun = this.groupObj.id ? editGroup : addGroup;
          fun(this.groupObj)
            .then((_) => {
              this.getGroupTree();
              this.$message({
                message: this.$t("saveSuccess"),
                type: "success",
                showClose: true,
              });
              this.groupDialogVisible = false;
            })
            .catch((_) => {});
        }
      });
    },
    groupDialogClosed() {
      this.groupObj = { name: undefined };
    },
    // 添加分组
    addGroup(node, data) {
      this.groupObj = {
        name: undefined,
        type: "device",
        parentId: data.id,
      };
      this.groupDialogVisible = true;
    },
    // 编辑分组
    editGroup(node, data) {
      this.groupObj = JSON.parse(JSON.stringify(data));
      this.groupDialogVisible = true;
    },
    // 删除分组
    deleteGroup(node, data) {
      this.$confirm(
        this.$t("material.deleteMaterialSort") + data.name + "?",
        this.$t("tip"),
        {
          confirmButtonText: this.$t("submitText"),
          cancelButtonText: this.$t("cancelText"),
          type: "warning",
        }
      )
        .then(function() {
          return delGroup(data.id);
        })
        .then(() => {
          this.getGroupTree();
          this.msgSuccess(this.$t("deleteSuccess"));
        })
        .catch(function() {});
    },
    /** 查询设备列表 */
    getList() {
      this.loading = true;
      listDevice(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.deviceList = response.data;
          this.deviceIds = [];
          this.deviceList.forEach((element) => {
            this.deviceIds.push(element.id);
          });
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 转换机构数据结构 */
    deptNormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.name,
        children: node.children,
      };
    },
    /** 查询机构名称下拉树结构 */
    getDeptTree() {
      deptTree().then((response) => {
        if (response.data && response.data.length > 0) {
          this.deptOptions = this.handleTree(
            response.data,
            "deptId",
            "parentId",
            "children",
            response.data[0].parentId
          );
        } else {
          this.deptOption = [];
        }
      });
    },
    /** 转换分组数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    /** 查询分组名称下拉树结构 */
    getGroupTree() {
      groupTree({ deptId: this.deptId, groupId: 43 }).then((response) => {
        this.groupOptions = response.data;
        this.groupDict = [];
        const findChildren = (arr, list) => {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].id) {
              list.push(arr[i]);
            }
            if (arr[i].children && arr[i].children.length) {
              findChildren(arr[i].children, list);
            }
          }
        };
        findChildren(this.groupOptions, this.groupDict);
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.fullPathId = data.id;
      // this.queryParams.current = 1
      this.getList();
    },
    // 设备类型字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.typeOptions, row.type);
    },
    // 状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 播放模式字典翻译
    playModeFormat(row, column) {
      return this.selectDictLabel(this.playModeOptions, row.playMode);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 批量修改弹窗取消按钮
    batchEditcancel() {
      this.batchEditModal = false;
      this.reset();
    },
    // 取消按钮
    authCancel() {
      this.authOpen = false;
    },
    mClose() {
      this.mOpen = false;
    },
    rCancel() {
      this.rOpen = false;
    },
    pCancel() {
      this.pOpen = false;
    },
    tCancel() {
      this.tOpen = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        code: undefined,
        name: undefined,
        groupId: undefined,
        groupName: undefined,
        type: undefined,
        status: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },

    /** 搜索按钮操作 */
    handleQueryAll() {
      this.queryParams.fullPathId = "";
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams.code = undefined;
      this.queryParams.ipAddress = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // treeselect规则校验
    inputSelect(data) {
      this.$refs.form.validateField("groupId");
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.onlines = selection.map((item) => item.online);
      for (let i = 0; i < this.onlines.length; i++) {
        if (this.onlines[i] === "0") {
          this.onlineStatus = false;
        }
      }
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    versionSelectionChange(selection) {
      if (selection.length > 1) {
        let del_row = selection.shift();
        this.$refs.versionTable.toggleRowSelection(del_row, false);
      }
      this.versionIds = selection.map((item) => item.id);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = this.$t("equipment.addEquipment");
    },
    /** 修改按钮操作 */
    handleEdit(row) {
      this.reset();
      const id = row.id || this.ids;
      getDevice(id).then((response) => {
        this.form = response.data;
        this.form.volume = Number(this.form.volume);
        this.timingStatus = this.form.timingStatus || 0;
        if (this.form.startTiming !== "null") {
          this.startTiming = this.form.startTiming;
        } else {
          this.startTiming = "";
        }
        if (this.form.shutTiming !== "null") {
          this.shutTiming = this.form.shutTiming;
        } else {
          this.shutTiming = "";
        }
        this.collapseActiveName = "1";
        this.drawer = true;
        // this.open = true
        this.title = this.$t("equipment.changeEquipment");
      });
    },
    handleDetail(row) {
      const id = row.id || this.ids;
      getDevice(id).then((response) => {
        this.deviceInfo = response.data;
        this.mOpen = true;
        this.title = this.title = this.$t("equipment.equipmentDetail");
        // 获取设备状态
        this.getDeviceStatus();
        // 获取频道数据
        this.getDeviceScheduling();
      });
    },
    programDeviceOpen(row) {
      this.deviceInfo.id = row.id;
      this.deviceInfo.code = row.code;
      this.title = this.$t("equipment.playingChanel");
      this.channelFlag = true;
      if (row.online === "1") {
        // 获取设备状态
        this.getDeviceStatus();
      } else {
        this.statusInfo.curProgram = "无";
      }
      // 获取频道数据
      this.getDeviceScheduling();
    },
    getDeviceInfo() {
      getDevice(this.deviceInfo.id).then((response) => {
        this.deviceInfo = response.data;
      });
    },
    getDeviceStatus() {
      getStatusInfo(this.deviceInfo.code).then((response) => {
        if (response.data && response.data.curProgram) {
          this.statusInfo = response.data;
        }
      });
    },
    getDeviceScheduling() {
      let devices = ",.,.,.,.,.,;p;";
      if (this.deviceInfo.code) {
        devices = this.deviceInfo.code;
      }
      listScheduling({ devices, current: 1, size: 10 }).then((response) => {
        this.schedulingList = response.data;
        this.schedulingList.forEach((element) => {
          if (element.programs) {
            element.programs = JSON.parse(element.programs);
          }
        });
      });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const getNameById = (deptId, deptOptions) => {
            for (let i = 0; i < deptOptions.length; i++) {
              if (deptOptions[i].id === deptId) {
                return deptOptions[i].name;
              }
              if (deptOptions[i].children) {
                return getNameById(deptId, deptOptions[i].children);
              }
            }
            return "";
          };
          this.form.deptName = getNameById(this.form.deptId, this.deptOptions);
          if (this.form.id !== undefined) {
            editDevice(this.form).then((response) => {
              if (response.code === 0) {
                this.msgSuccess(this.$t("loginLog.changeSuccess"));
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addDevice(this.form).then((response) => {
              if (response.code === 0) {
                this.msgSuccess(this.$t("addSuccess"));
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },
    batchSubmitForm: function() {
      batchEditDevice(this.form, this.ids).then((response) => {
        if (response.code === 0) {
          this.msgSuccess(this.$t("loginLog.batchEditSuccess"));
          this.batchEditModal = false;
          this.getList();
        } else {
          this.msgError(response.msg);
        }
      });
    },
    authSubmitForm: function() {
      this.$refs["authForm"].validate((valid) => {
        if (valid) {
          // this.authForm.deptName = getLabelByValInTree(this.deptOptions, this.authForm.deptId, {
          //   label: 'name',
          //   value: 'deptId'
          // })
          this.authForm.groupName = getLabelByValInTree(
            this.groupDict,
            this.authForm.groupId,
            {
              label: "name",
              value: "id",
            }
          );
          this.authForm.status = "1";
          editDevice(this.authForm).then((response) => {
            if (response.code === 0) {
              this.msgSuccess(this.$t("certificationSuccess"));
              this.authOpen = false;
              this.getList();
            } else {
              this.msgError(response.msg);
            }
          });
        }
      });
    },
    /** 删除按钮操作 */
    // handleDel(row) {
    //   const ids = row.id || this.ids
    //   this.$confirm(this.$t('equipment.deleteEquipment1') + ids + this.$t('equipment.deleteEquipment2'), this.$t('tip'), {
    //     confirmButtonText: this.$t('submitText'),
    //     cancelButtonText: this.$t('cancelText'),
    //     type: 'warning'
    //   }).then(function() {
    //     return delDevice(ids)
    //   }).then(() => {
    //     this.getList()
    //     this.msgSuccess(this.$t('deleteSuccess'))
    //   }).catch(function() {
    //   })
    // },
    /** 删除按钮操作 */
    handleDel(row) {
      const ids = row.id || this.ids;
      this.$confirm(
        this.$t("equipment.deleteEquipment1") +
          ids +
          this.$t("equipment.deleteEquipment2"),
        this.$t("tip"),
        {
          confirmButtonText: this.$t("submitText"),
          cancelButtonText: this.$t("cancelText"),
          type: "warning",
        }
      )
        .then(function() {
          return updateStatus(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess(this.$t("deleteSuccess"));
        })
        .catch(function() {});
    },
    /** 导出按钮操作 */
    handleExport() {
      if (this.ids.length === 0) {
        this.msgWarning(this.$t("equipment.equipmentInput"));
        return;
      }
      const queryParams = this.queryParams;
      this.$confirm(
        this.$t("equipment.enterExportEquipmentData"),
        this.$t("tip"),
        {
          confirmButtonText: this.$t("submitText"),
          cancelButtonText: this.$t("cancelText"),
          type: "warning",
        }
      )
        .then(() => {
          console.log(this);
          return exportDevice(queryParams, this.ids);
        })
        .then((response) => {
          this.download(response.data);
        })
        .catch(function() {});
    },
    // 共三个参数，依次为： 传递给 data 属性的数组中该节点所对应的对象、
    // 节点本身是否被选中、 节点的子树中是否有被选中的节点
    handleCheckChange(a, b, c) {
      if (a.id !== 0) {
        const index = this.selectedGroupIdList.indexOf(a.id);
        if (index === -1) {
          this.selectedGroupIdList.push(a.id);
        } else {
          this.selectedGroupIdList.splice(index, 1);
        }
      }
    },
    // 分组打开/关闭触发函数
    handleGroupStatusChange(val) {
      if (val === false) {
        // 清空选择
        this.selectedGroupIdList.forEach((it) => {
          this.$refs.tree.setChecked(it, false);
        });
        this.selectedGroupIdList = [];
      }
    },
    // 认证
    handleAuth(row) {
      const id = row.id || this.ids;
      getDevice(id).then((response) => {
        this.authForm = response.data;
        this.authOpen = true;
      });
    },
    // 定时开关机
    timingSwitch(type, id) {
      let way = "device";
      let ids = [];
      if (type !== 1) {
        if (this.groupStatus) {
          way = "group";
          if (this.selectedGroupIdList.length) {
            ids = this.selectedGroupIdList;
          } else {
            this.$message({
              message: this.$t("chooseLeftSort"),
              type: "info",
              showClose: true,
            });
          }
        } else {
          way = "device";
          ids = this.ids;
        }
        if (ids.length === 0) {
          this.$message({
            message: this.$t("chooseEquipment"),
            type: "warning",
            showClose: true,
          });
          return;
        }
      } else {
        ids = id;
      }
      this.startTiming = "08:00";
      this.shutTiming = "21:00";
      this.timingStatus = "0";
      this.tOpen = true;
    },

    // 定时开关机右侧
    timingSwitchOpen(id) {
      if (
        this.timingStatus === "1" &&
        (!this.startTiming || !this.shutTiming)
      ) {
        this.startTiming = "08:00";
        this.shutTiming = "21:00";
        // this.$message({ message: '请先选择时间！', type: 'warning', showClose: true })
        // this.timingStatus = 0
        // return
      }
      let data = {
        way: "device",
        ids: id,
        times,
        timingStatus: this.timingStatus === "1" ? 1 : 0,
      };
      switchTiming(data).then((response) => {
        this.getList();
        this.msgSuccess(this.$t("operationSuccess"));
      });
    },

    timingSwitchEdit() {
      if (
        this.timingStatus === "1" &&
        (!this.startTiming || !this.shutTiming)
      ) {
        this.$message({
          message: this.$t("chooseTime"),
          type: "warning",
          showClose: true,
        });
        this.timingStatus = 0;
        return;
      }
    },
    tSubmitForm: function() {
      let way = "device";
      let ids = [];
      if (this.groupStatus) {
        way = "group";
        if (this.selectedGroupIdList.length) {
          ids = this.selectedGroupIdList;
        } else {
          this.$message({
            message: this.$t("chooseLeftSort"),
            type: "info",
            showClose: true,
          });
        }
      } else {
        way = "device";
        ids = this.ids;
      }
      if (ids.length === 0) {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      let times = this.timeControl;
      ids = this.statisticsOnline(ids);
      let data = {
        way,
        ids,
        times,
        timingStatus: this.timingStatus === "1" ? 1 : 0,
      };
      this.$confirm(this.$t("chooseEquipmentOff"), "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          switchTiming(data).then((response) => {
            this.getList();
            this.msgSuccess(this.$t("operationSuccess"));
            this.tOpen = false;
          });
        })
        .catch(() => {
          this.tOpen = false;
        });
    },
    //批量修改
    batchEdit() {
      console.log(this.selectedGroupIdList);
      let way = "device";
      if (this.groupStatus) {
        way = "group";

        if (this.selectedGroupIdList.length) {
          this.ids = this.selectedGroupIdList;
        } else {
          this.$message({
            message: this.$t("chooseLeftSort"),
            type: "info",
            showClose: true,
          });
        }
      } else {
        way = "device";
      }
      if (this.ids.length === 0) {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      this.reset();
      this.batchEditModal = true;
    },
    // 点击清空节目触发函数
    clear() {
      let way = "device";
      let ids = [];
      if (this.groupStatus) {
        way = "group";
        if (this.selectedGroupIdList.length) {
          ids = this.selectedGroupIdList;
        } else {
          this.$message({
            message: this.$t("chooseLeftSort"),
            type: "info",
            showClose: true,
          });
        }
      } else {
        way = "device";
        ids = this.ids;
      }
      if (ids.length === 0) {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      this.$confirm(this.$t("enterClearEquipment"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      })
        .then(function() {
          return clearplay(way, ids);
        })
        .then((response) => {
          this.getList();
          this.msgSuccess(this.$t("operationSuccess"));
        })
        .catch(function() {});
    },
    // 音量设置
    volumeSet() {
      let way = "device";
      let ids = [];
      if (this.groupStatus) {
        way = "group";
        if (this.selectedGroupIdList.length) {
          ids = this.selectedGroupIdList;
        } else {
          this.$message({
            message: this.$t("chooseLeftSort"),
            type: "info",
            showClose: true,
          });
        }
      } else {
        way = "device";
        ids = this.ids;
      }
      if (ids.length === 0) {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      ids = this.statisticsOnline(ids);
      this.$prompt(this.$t("voiceInput"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        inputPattern: /^([1-9]?\d|100)$/,
        inputErrorMessage: this.$t("voiceFormat"),
      })
        .then(({ value }) => {
          if (this.onlineStatus == false) {
            this.$confirm(this.$t("chooseEquipmentOff"), "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                setVolume(way, ids, value).then((response) => {
                  this.getList();
                  this.msgSuccess(this.$t("operationSuccess"));
                });
              })
              .catch(() => {});
          } else {
            setVolume(way, ids, value).then((response) => {
              this.getList();
              this.msgSuccess(this.$t("operationSuccess"));
            });
          }
        })
        .catch(() => {});
    },

    // 右侧音量设置
    volumeSetRight(form) {
      const way = "device";
      setVolume(way, form.id, form.volume).then((response) => {
        this.getList();
        this.msgSuccess(this.$t("operationSuccess"));
      });
    },
    // 静音
    volumeMute(type, id) {
      let way = "device";
      let ids = [];
      if (type !== 1) {
        if (this.groupStatus) {
          way = "group";
          if (this.selectedGroupIdList.length > 0) {
            ids = this.selectedGroupIdList;
          } else {
            this.$message({
              message: this.$t("chooseLeftSort"),
              type: "info",
              showClose: true,
            });
          }
        } else {
          way = "device";
          ids = this.ids;
        }
        if (ids.length === 0) {
          this.$message({
            message: this.$t("chooseEquipment"),
            type: "warning",
            showClose: true,
          });
          return;
        }
      } else {
        ids = id;
      }
      ids = this.statisticsOnline(ids);

      this.$confirm(this.$t("chooswEquipmentClean"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      })
        .then(() => {
          if (this.onlineStatus == false) {
            this.$confirm(this.$t("chooseEquipmentOff"), "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(function() {
                return muteVolume(way, ids);
              })
              .catch(function() {});
          } else {
            return muteVolume(way, ids);
          }
        })
        .then((response) => {
          this.getList();
          this.msgSuccess(this.$t("operationSuccess"));
        })
        .catch(() => {});
    },
    // 关机
    shutdown(type, id) {
      let way = "device";
      let ids = [];
      if (type !== 1) {
        if (this.groupStatus) {
          way = "group";
          if (this.selectedGroupIdList.length) {
            ids = this.selectedGroupIdList;
          } else {
            this.$message({
              message: this.$t("chooseLeftSort"),
              type: "info",
              showClose: true,
            });
          }
        } else {
          way = "device";
          ids = this.ids;
        }
        if (ids.length === 0) {
          this.$message({
            message: this.$t("chooseEquipment"),
            type: "warning",
            showClose: true,
          });
          return;
        }
      } else {
        ids = id;
      }
      this.$confirm(this.$t("chooseEquipmentClose"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      })
        .then(function() {
          return shutdownDevice(way, ids);
        })
        .then((response) => {
          this.getList();
          this.msgSuccess(this.$t("operationSuccess"));
        })
        .catch(function() {});
    },
    // 重启
    reboot(type, id) {
      let way = "device";
      let ids = [];
      if (type !== 1) {
        if (this.groupStatus) {
          way = "group";
          if (this.selectedGroupIdList.length) {
            ids = this.selectedGroupIdList;
          } else {
            this.$message({
              message: this.$t("chooseLeftSort"),
              type: "info",
              showClose: true,
            });
          }
        } else {
          way = "device";
          ids = this.ids;
        }
        if (ids.length === 0) {
          this.$message({
            message: this.$t("chooseEquipment"),
            type: "warning",
            showClose: true,
          });
          return;
        }
      } else {
        ids = id;
      }
      ids = this.statisticsOnline(ids);
      this.$confirm(this.$t("chooseEquipmentReset"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      })
        .then(() => {
          if (this.onlineStatus == false) {
            this.$confirm(this.$t("chooseEquipmentOff"), "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(function() {
                return rebootDevice(way, ids);
              })
              .catch(function() {});
          } else {
            return rebootDevice(way, ids);
          }
        })
        .then((response) => {
          this.getList();
          this.msgSuccess(this.$t("operationSuccess"));
        })
        .catch(() => {});
    },
    // 开始播放
    playStart(type, id) {
      let way = "device";
      let ids = [];
      if (type !== 1) {
        if (this.groupStatus) {
          way = "group";
          if (this.selectedGroupIdList.length) {
            ids = this.selectedGroupIdList;
          } else {
            this.$message({
              message: this.$t("chooseLeftSort"),
              type: "info",
              showClose: true,
            });
          }
        } else {
          way = "device";
          ids = this.ids;
        }
        if (ids.length === 0) {
          this.$message({
            message: this.$t("chooseEquipment"),
            type: "warning",
            showClose: true,
          });
          return;
        }
      } else {
        ids = id;
      }
      ids = this.statisticsOnline(ids);

      this.$confirm(this.$t("chooseEquipmentStart"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      })

        .then(() => {
          if (this.onlineStatus == false) {
            this.$confirm(this.$t("chooseEquipmentOff"), "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(function() {
                return startPlay(way, ids);
              })
              .catch(function() {});
          } else {
            return startPlay(way, ids);
          }
        })
        .then((response) => {
          this.getList();
          this.msgSuccess(this.$t("operationSuccess"));
        })
        .catch(() => {});
    },
    // 停止播放
    playStop(type, id) {
      let way = "device";
      let ids = [];
      if (type !== 1) {
        if (this.groupStatus) {
          way = "group";
          if (this.selectedGroupIdList.length > 0) {
            ids = this.selectedGroupIdList;
          } else {
            this.$message({
              message: "请选择左侧分组",
              type: "info",
              showClose: true,
            });
          }
        } else {
          way = "device";
          ids = this.ids;
        }
        if (ids.length === 0) {
          this.$message({
            message: "请先选择分组或设备",
            type: "warning",
            showClose: true,
          });
          return;
        }
      } else {
        ids = id;
      }
      ids = this.statisticsOnline(ids);
      this.$confirm("确认要停止播放选择的设备吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.onlineStatus == false) {
            this.$confirm(this.$t("chooseEquipmentOff"), "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(function() {
                return stopPlay(way, ids);
              })
              .catch(function() {});
          } else {
            return stopPlay(way, ids);
          }
        })
        .then((response) => {
          this.getList();
          this.msgSuccess("操作成功");
        })
        .catch(() => {});
    },
    // 启用设备
    // enableDevice() {
    //   if (this.groupStatus) {

    //   } else {

    //   }
    // },
    // // 停用设备
    // disableDevice() {
    //   if (this.groupStatus) {

    //   } else {

    //   }
    // },
    // 截屏
    screenshot(type, id) {
      let deviceId;
      if (type === 1) {
        if (Array.isArray(id)) {
          if (id.length === 1) {
            deviceId = id[0];
          } else {
            return this.$message({
              message: this.$t("chooseLeftSort"),
              type: "warning",
              showClose: true,
            });
          }
        } else {
          deviceId = id;
        }
      } else if (type === 2) {
        deviceId = this.deviceIds;
        return shotImage(deviceId);
      } else {
        if (!this.deviceInfo.id) {
          this.$message({
            message: this.$t("equipment.noEquipment"),
            type: "warning",
            showClose: true,
          });
          return;
        }
        deviceId = this.deviceInfo.id;
      }
      this.$confirm(this.$t("equipment.screenCapture"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      })
        .then(function() {
          return shotImage(deviceId);
        })
        .then(() => {
          // this.getDeviceInfo()
          this.msgSuccess(this.$t("operationSuccess"));
        })
        .catch(function() {});
    },
    // 应用升级
    appUpgrade() {
      let way = "device";
      let ids = [];
      if (this.groupStatus) {
        way = "group";
        if (this.selectedGroupIdList.length) {
          ids = this.selectedGroupIdList;
        } else {
          this.$message({
            message: this.$t("chooseLeftSort"),
            type: "info",
            showClose: true,
          });
        }
      } else {
        way = "device";
        ids = this.ids;
      }
      if (ids.length === 0) {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      this.versionDialogVisible = true;
    },
    // 统计在线设备
    statisticsOnline(oldIds) {
      let ids = [];
      for (let key in this.deviceList) {
        if (
          this.ids.includes(this.deviceList[key].id) &&
          this.deviceList[key].online == "1"
        ) {
          ids.push(this.deviceList[key].id);
        }
      }
      return ids.filter((item) => oldIds.includes(item));
    },
    appUpdate() {
      let way = "device";
      for (let i = 0; i < this.onlines.length; i++) {
        if (this.onlines[i] === "0") {
          this.$confirm(this.$t("chooseEquipment"), "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).catch(() => {
            this.versionDialogVisible = false;
          });
        }
      }
      if (this.versionIds.length < 1) {
        this.$message({
          message: this.$t("chooseVersion"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      const ids = this.statisticsOnline(this.ids);
      if (this.onlineStatus == false) {
        this.$confirm(this.$t("chooseEquipmentOff"), "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$confirm(this.$t("chooseEquipmentUpdate"), this.$t("tip"), {
              confirmButtonText: this.$t("submitText"),
              cancelButtonText: this.$t("cancelText"),
              type: "warning",
            })
              .then(() => {
                return upgradeApp(way, ids, this.versionIds);
              })
              .then((response) => {
                this.versionDialogVisible = false;
                this.$refs.versionTable.clearSelection();
                this.versionIds = [];
                this.getList();
                this.msgSuccess(this.$t("operationSuccess"));
              })
              .catch(() => {
                this.versionDialogVisible = false;
              });
          })
          .catch(() => {
            this.versionDialogVisible = false;
          });
      } else {
        this.$confirm(this.$t("chooseEquipmentUpdate"), this.$t("tip"), {
          confirmButtonText: this.$t("submitText"),
          cancelButtonText: this.$t("cancelText"),
          type: "warning",
        })
          .then(() => {
            return upgradeApp(way, ids, this.versionIds);
          })
          .then((response) => {
            this.versionDialogVisible = false;
            this.$refs.versionTable.clearSelection();
            this.versionIds = [];
            this.getList();
            this.msgSuccess(this.$t("operationSuccess"));
          })
          .catch(() => {
            this.versionDialogVisible = false;
          });
      }
    },

    // 模式设置
    modeSet() {
      this.playMode = null;
      this.pOpen = true;
    },
    pSubmitForm: function() {
      if (!this.playMode) {
        this.$message({
          type: "warning",
          message: this.$t("equipment.modeInput"),
        });
        return;
      }
      let way = "device";
      let ids = [];
      if (this.groupStatus) {
        way = "group";
        if (this.selectedGroupIdList.length) {
          ids = this.selectedGroupIdList;
        } else {
          this.$message({
            message: this.$t("chooseLeftSort"),
            type: "info",
            showClose: true,
          });
        }
      } else {
        way = "device";
        ids = this.ids;
      }
      if (ids.length === 0) {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      setMode(way, ids, this.playMode).then((response) => {
        this.getList();
        this.msgSuccess(this.$t("operationSuccess"));
        this.pOpen = false;
      });
    },
    // 背光设置
    backlightSet() {
      let way = "device";
      let ids = [];
      if (this.groupStatus) {
        way = "group";
        if (this.selectedGroupIdList.length) {
          ids = this.selectedGroupIdList;
        } else {
          this.$message({
            message: this.$t("chooseLeftSort"),
            type: "info",
            showClose: true,
          });
        }
      } else {
        way = "device";
        ids = this.ids;
      }
      if (ids.length === 0) {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      this.$prompt(this.$t("elButton.backlightSetting"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        inputPattern: /^([0-1])$/,
        inputErrorMessage: this.$t("elButton.backlightSetInput"),
      })
        .then(({ value }) => {
          setBacklight(way, ids, value).then((response) => {
            this.getList();
            this.msgSuccess(this.$t("operationSuccess"));
          });
        })
        .catch(() => {});
    },
    // 亮度设置
    brightnessSet() {
      let way = "device";
      let ids = [];
      if (this.groupStatus) {
        way = "group";
        if (this.selectedGroupIdList.length) {
          ids = this.selectedGroupIdList;
        } else {
          this.$message({
            message: this.$t("chooseLeftSort"),
            type: "info",
            showClose: true,
          });
        }
      } else {
        way = "device";
        ids = this.ids;
      }
      if (ids.length === 0) {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      ids = this.statisticsOnline(ids);
      this.$prompt(this.$t("elButton.brightnessSetting"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        inputPattern: /^([0-1]?[0-9]?[0-9]|[2][0-4][0-9]|25[0-5])$/,
        inputErrorMessage: this.$t("elButton.brightnessErrorInput"),
      })
        .then(({ value }) => {
          if (this.onlineStatus == false) {
            this.$confirm(this.$t("chooseEquipmentOff"), "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                setBrightness(way, ids, value).then((response) => {
                  this.getList();
                  this.msgSuccess(this.$t("operationSuccess"));
                });
              })
              .catch(() => {});
          } else {
            setBrightness(way, ids, value).then((response) => {
              this.getList();
              this.msgSuccess(this.$t("operationSuccess"));
            });
          }
        })
        .catch(() => {});
    },
    rSubmitForm: function() {
      if (!this.rotationDegree) {
        this.$message({
          type: "warning",
          message: this.$t("elButton.rotateInput"),
        });
        return;
      }
      let way = "device";
      let ids = [];
      if (this.groupStatus) {
        way = "group";
        if (this.selectedGroupIdList.length) {
          ids = this.selectedGroupIdList;
        } else {
          this.$message({
            message: this.$t("chooseLeftSort"),
            type: "info",
            showClose: true,
          });
        }
      } else {
        way = "device";
        ids = this.ids;
      }
      if (ids.length === 0) {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      setRotate(way, ids, this.rotationDegree).then((response) => {
        this.getList();
        this.msgSuccess(this.$t("operationSuccess"));
        this.rOpen = false;
      });
    },
    // 旋转设置
    rotateSet() {
      this.rotationDegree = null;
      this.rOpen = true;
    },
    // 横竖屏设置
    HAVSet() {
      let way = "device";
      let ids = [];
      if (this.groupStatus) {
        way = "group";
        if (this.selectedGroupIdList.length) {
          ids = this.selectedGroupIdList;
        } else {
          this.$message({
            message: this.$t("chooseLeftSort"),
            type: "info",
            showClose: true,
          });
        }
      } else {
        way = "device";
        ids = this.ids;
      }
      if (ids.length === 0) {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      this.$prompt(this.$t("elButton.HAVSetting"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        inputPattern: /^([0-1])$/,
        inputErrorMessage: this.$t("elButton.backlightSetInput"),
      })
        .then(({ value }) => {
          setHAV(way, ids, value).then((response) => {
            this.getList();
            this.msgSuccess(this.$t("operationSuccess"));
          });
        })
        .catch(() => {});
    },
    openSpeechDialog() {
      if (this.ids.length !== 0) {
        this.speechDialogVisible = true;
      } else {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
      }
    },
    // 测试语音播报
    speechTest() {
      if (!this.speechContent) {
        return this.$message({
          message: "请输入播报内容",
          type: "warning",
          showClose: true,
        });
      }
      this.speechDialogVisible = false;

      let way = "device";
      let ids = [];
      if (this.groupStatus) {
        way = "group";
        if (this.selectedGroupIdList.length) {
          ids = this.selectedGroupIdList;
        } else {
          this.$message({
            message: this.$t("chooseLeftSort"),
            type: "info",
            showClose: true,
          });
        }
      } else {
        way = "device";
        ids = this.ids;
      }
      if (ids.length === 0) {
        this.$message({
          message: this.$t("chooseEquipment"),
          type: "warning",
          showClose: true,
        });
        return;
      }
      const value = this.speechContent;
      ids = this.statisticsOnline(ids);
      if (this.onlineStatus == false) {
        this.$confirm(this.$t("chooseEquipmentOff"), "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            setSpeechTest(way, ids, value).then((response) => {
              this.getList();
              this.msgSuccess(this.$t("operationSuccess"));
            });
          })
          .catch(() => {
            this.speechDialogVisible = false;
          });
      } else {
        setSpeechTest(way, ids, value).then((response) => {
          this.getList();
          this.msgSuccess(this.$t("operationSuccess"));
        });
      }
    },
    switchList() {
      this.listType = this.listType === 0 ? 1 : 0;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-collapse-item__header {
  background: #f2f2f2;
  padding: 0 10px;
}

/deep/ .el-collapse-item__wrap {
  padding: 10px;
}

/deep/ .el-collapse-item {
  border: 1px solid #cccccc;
  border-bottom: 0;

  &:last-child {
    border-bottom: 1px solid #cccccc;
  }
}

/deep/ .el-form-item {
  margin-top: 10px;
}

.tree {
  overflow-x: auto;
}

.el-tree {
  min-width: 100%;
  display: inline-block;
}

.operation {
  background: #eeeeee;
  height: 100%;
  overflow-y: auto;

  .img-box {
    text-align: center;
    height: 120px;
    line-height: 120px;
    padding: 10px 0;

    img {
      height: 100%;
    }
  }
}

.list-type {
  width: 12px;
  height: 12px;
}

.tip {
  text-align: center;
  padding-top: 80px;
  font-size: 18px;
  color: #999999;
}

/deep/ .out-list {
  width: 100%;

  .item {
    position: relative;
    border: 1px solid #cccccc;
    padding: 3px;
    width: 260px;
    height: 260px;
    margin-right: 14px;
    margin-bottom: 14px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;

    .title {
      padding: 0 6px;
      font-size: 12px;
      background: white;
    }

    img {
      width: 100%;
      height: 100%;
    }

    .bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 0 6px;
      color: white;
      background: rgba(0, 0, 0, 0.3);
      text-align: center;
      font-size: 12px;
    }
  }
}

.list {
  .item {
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
    cursor: pointer;

    &:last-child {
      border-bottom: 0;
    }
  }
}

.app-container {
  .el-table {
    border-top: 1px solid #e6ebf5;
  }

  .dialog {
    /deep/ .el-dialog {
      overflow: auto;
      width: 100%;
      margin-top: 0 !important;

      .title {
        background-color: #f8f8f9;
      }

      .shotTime {
        margin-top: 20px;
        line-height: 30px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }

  .custom-tree-item {
    &:after {
      content: "";
      display: block;
      clear: both;
    }

    &:hover {
      .right-btns {
        opacity: 1;
      }
    }

    font-size: 16px;
    width: 100%;

    .right-btns {
      float: right;
      color: #000;
      opacity: 0;
      transition: 0.3s all;
      user-select: none;

      .svg-icon {
        margin: 0 2px;

        &:hover {
          color: #999;
        }
      }
    }
  }

  .swidth {
    width: 150px;
  }

  /deep/ .el-form-item--medium .el-form-item__content {
    line-height: 34px;
  }

  /deep/ .el-message-box .el-message-box__header {
    width: 400px;
  }

  /deep/ .vue-treeselect__control {
    height: 33px;
  }
}
</style>
